<template>
    <template v-if="menuItemObj.children && menuItemObj.children.length > 0">
        <el-sub-menu :index="menuItemObj.name">
            <template #title>
                <!-- <ElSvgIcon aIconName="el-icon-edit"></ElSvgIcon> -->
                <!-- <ElSvgIcon aIconName="edit"></ElSvgIcon> -->
                <!-- <el-icon><el-icon-location /></el-icon> -->
                <el-icon><component :is="menuItemObj.icon" /></el-icon>
                <span>{{ menuItemObj.title }}</span>
            </template>
            <!-- <template v-for="item in menuItemObj.children">
                    <MyMenuItem :menuItemObj="item"></MyMenuItem>
                </template> -->
            <MyMenuItem
                v-for="item in menuItemObj.children"
                :menuItemObj="item" :basePath="toPath"
            >
            </MyMenuItem>
        </el-sub-menu>
    </template>
    <template v-else>
        <!-- <MyLink aToUrl="https://www.126.com"> -->
        <MyLink :aToUrl="toPath">
            <el-menu-item :index="menuItemObj.name">
                <el-icon><component :is="menuItemObj.icon" /></el-icon>
                <template #title> {{ menuItemObj.title }} </template>
            </el-menu-item>
        </MyLink>
    </template>
</template>
<script setup lang="ts">
import { PropType } from "vue";
import { TypeMyMenuItem } from "./my_menu_type";
import MyLink from "../link/link_index.vue";
import browserPath from 'path-browserify' 
import { NslUtils } from "@/utils/NslUtil";
//#region defineXxx
defineOptions({
    name: "MyMenuItem",
});
const props = defineProps({
    menuItemObj: {
        type: Object as PropType<TypeMyMenuItem>,
        required: true,
    },
    basePath: {
        type: String,
        default: "/",
    },
});

function resolvePath(basePath:string,offsetPath:string=''){
    if(offsetPath && NslUtils.isExternal(offsetPath)){
        return offsetPath;
    }
    if(NslUtils.isExternal(basePath)){
        return basePath;
    }
    const fullPath=browserPath.resolve(props.basePath,props.menuItemObj.path);
    return fullPath;
}


// const toPath=props.basePath+"/"+props.menuItemObj.path;
// const toPath=browserPath.resolve(props.basePath,props.menuItemObj.path);
const toPath=resolvePath(props.basePath,props.menuItemObj.path);


//#endregion
</script>
<style lang="less">
// .el-sub-menu__title{
//     // --el-menu-text-color:red;
//     color:red;
// }
</style>
